<template>
	<!-- 就医记录tab -->
	<view class="medicalRecord-content">
		<view class="medicalRecord-tab">
			<view 
				v-for="(item, index) in medicalRecordTab"
				:key="index"
				:class="{ active: index === medicalRecordTabNumber}"  
				class="medicalRecord-tab-view"
				@tap="tabClick(index)"
			>
				{{item}}
				<view 
					class="medicalTabBorderOuter"
				>
					<view :class="{medicalRecordTab: index === medicalRecordTabNumber}"></view>
				</view>
			</view>
		</view>
		<!-- 宠物的病例资料 -->
		<view class="medical-tab0-content" v-show="0 === medicalRecordTabNumber">
			<view class="medical-tab0-tips">
				<view class="medical-tab0-tips-left">每天做宠物的视频打卡记录，让医生更了解恢复情况和用药情况，还能得到医生的免费咨询哦！</view>
				<view class="medical-tab0-tips-right">视频打卡</view>
			</view>
			<view class="medical-tab0-list-Outer">
				<view class="medical-tab0-animal">
					<text class="medical-tab0-animal-title">{{animalArr[animalArrIndex].name}}的病历资料</text>
					<picker 
						class="medical-tab0-animal-check"
						mode="selector" 
						:range="animalArr" 
						:value="animalArrIndex" 
						@change="bindPickerChange"
						range-key="name"
					 >切换狗狗</picker>
				</view>
				<view class="medical-tab0-list">
					<view class="medical-tab0-title">2021-12-19 17:26:30</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">就诊宠物：</text>
						<view class="medical-tab0-list-name">
							<text>贝贝</text>
						</view>
					</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">接诊医院：</text>
						<view class="medical-tab0-list-name">
							<text>瑞鹏宠物医院（三林分院）</text>
						</view>
						
					</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">接诊医生：</text>
						<view class="medical-tab0-list-name">
							<text>张医生</text>
						</view>
					</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">诊断结果：</text>
						<view class="medical-tab0-list-name">
							<text>手术切除病变子宫，术中大量生理盐水冲洗腹</text>
						</view>
						
					</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">复诊时间：</text>
						<view class="medical-tab0-list-name">
							<text class="red">12月21日 14:15</text>
						</view>
					</view>
					<view class="medical-tab0-list-detail" @tap="pageToDetail()">
						查看详情
					</view>
				</view>
				<view class="medical-tab0-list">
					<view class="medical-tab0-title">2021-12-19 17:26:30</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">就诊宠物：</text>
						<view class="medical-tab0-list-name">
							<text>贝贝</text>
						</view>
					</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">接诊医院：</text>
						<view class="medical-tab0-list-name">
							<text>瑞鹏宠物医院（三林分院）</text>
						</view>
						
					</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">接诊医生：</text>
						<view class="medical-tab0-list-name">
							<text>张医生</text>
						</view>
					</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">诊断结果：</text>
						<view class="medical-tab0-list-name">
							<text>手术切除病变子宫，术中大量生理盐水冲洗腹</text>
						</view>
						
					</view>
					<view class="medical-tab0-list-content">
						<text class="medical-tab0-list-key">复诊时间：</text>
						<view class="medical-tab0-list-name">
							<text class="red">12月21日 14:15</text>
						</view>
					</view>
					<view class="medical-tab0-list-detail" @tap="pageToDetail()">
						查看详情
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 随访方案 -->
		<view class="medical-tab1-content" v-show="1 === medicalRecordTabNumber">
			<view class="medical-tab1-tips">
				<view class="medical-tab0-tips-left">每天做宠物的视频打卡记录，让医生更了解恢复情况和用药情况，还能得到医生的免费咨询哦！</view>
				<view class="medical-tab0-tips-right">视频打卡</view>
			</view>
			<view class="medical-tab0-list-Outer">
				<view class="medical-tab0-animal">
					<text class="medical-tab0-animal-title">{{animalArr[animalArrIndex].name}}的随访计划</text>
					<picker 
						class="medical-tab0-animal-check"
						mode="selector" 
						:range="animalArr" 
						:value="animalArrIndex" 
						@change="bindPickerChange"
						range-key="name"
					 >切换狗狗</picker>
				</view>
				<view class="medical-tab1-list">
					<view class="medical-tab1-list-left">
						<view class="medical-tab1-list-left-title">
							诊后
						</view>
						<view class="medical-tab1-list-left-time">
							<text class="medical-tab1-list-left-time-first">18</text>
							<text class="medical-tab1-list-left-time-second">天</text>
						</view>
					</view>
					<view class="medical-tab1-list-right">
						<view class="medical-tab1-list-right-list">
							<view class="medical-tab1-list-right-iconTip">
								<image :src="`${prefix_image}/homepage/IntegralRecord/useDrugs.png`" mode="aspectFit" />
								<text class="medical-tab1-list-right-iconTip-text">用药提醒</text>
							</view>
							<view class="medical-tab1-list-right-tips">用药提醒用药提醒用药提醒用药提醒用药提醒用药提醒</view>
						</view>
						
						<view class="medical-tab1-list-right-list">
							<view class="medical-tab1-list-right-iconTip">
								<image :src="`${prefix_image}/homepage/IntegralRecord/Diet.png`" mode="aspectFit" />
								<text class="medical-tab1-list-right-iconTip-text">生活作息提醒</text>
							</view>
							<view class="medical-tab1-list-right-tips">生活作息提醒生活作息提醒生活作息提醒生活作息提醒生活作息提醒</view>
						</view>
						
						
						<view class="medical-tab1-list-right-list">
							<view class="medical-tab1-list-right-iconTip">
								<image :src="`${prefix_image}/homepage/IntegralRecord/LifeRoutine.png`" mode="aspectFit" />
								<text class="medical-tab1-list-right-iconTip-text">饮食提醒</text>
							</view>
							<view class="medical-tab1-list-right-tips">饮食提醒饮食提醒饮食提醒饮食提醒</view>
						</view>
						
					</view>
				</view>
				
				<view class="medical-tab1-list">
					<view class="medical-tab1-list-left">
						<view class="medical-tab1-list-left-title">
							诊后
						</view>
						<view class="medical-tab1-list-left-time">
							<text class="medical-tab1-list-left-time-first">18</text>
							<text class="medical-tab1-list-left-time-second">天</text>
						</view>
					</view>
					<view class="medical-tab1-list-right">
						<view class="medical-tab1-list-right-list">
							<view class="medical-tab1-list-right-iconTip">
								<image :src="`${prefix_image}/homepage/IntegralRecord/useDrugs.png`" mode="aspectFit" />
								<text class="medical-tab1-list-right-iconTip-text">用药提醒</text>
							</view>
							<view class="medical-tab1-list-right-tips">用药提醒用药提醒用药提醒用药提醒用药提醒用药提醒</view>
						</view>
						
						<view class="medical-tab1-list-right-list">
							<view class="medical-tab1-list-right-iconTip">
								<image :src="`${prefix_image}/homepage/IntegralRecord/Diet.png`" mode="aspectFit" />
								<text class="medical-tab1-list-right-iconTip-text">生活作息提醒</text>
							</view>
							<view class="medical-tab1-list-right-tips">生活作息提醒生活作息提醒生活作息提醒生活作息提醒生活作息提醒</view>
						</view>
						
						
						<view class="medical-tab1-list-right-list">
							<view class="medical-tab1-list-right-iconTip">
								<image :src="`${prefix_image}/homepage/IntegralRecord/LifeRoutine.png`" mode="aspectFit" />
								<text class="medical-tab1-list-right-iconTip-text">饮食提醒</text>
							</view>
							<view class="medical-tab1-list-right-tips">饮食提醒饮食提醒饮食提醒饮食提醒</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue"
import config from '@/hooks/useConfig.js'

export default defineComponent({
	setup() {
		const { prefix_image }=config()
		const data = reactive({
			"medicalRecordTab": ["病历资料", "随访方案"],
			"medicalRecordTabNumber": 0,
			"animalArr": [
				{
				name: "贝贝",
				namekey: 0
			},{
				name: "欢欢",
				namekey: 1
			},{
				name: "迎迎",
				namekey: 2
			}],
			"animalArrIndex": 0
		})
		
		// pick选择
		const bindPickerChange = (e) => {
			console.log(e)
			data.animalArrIndex = e.target.value
		}
		
		// tab栏目切换
		const tabClick = (index) => {
			data.medicalRecordTabNumber = index
		}
		
		// 页面跳转
		const pageToDetail = () => {
			uni.navigateTo({
				url: '/pages/caseDetail/index'
			});
		}
		return {
			...toRefs(data),
			tabClick,
			bindPickerChange,
			pageToDetail,
			prefix_image
		}
	}
})
</script>

<style lang="stylus" scoped>
	.medicalRecord-tab{
		display:flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		background-color: #FFD300;
		height:106rpx;
		line-height: 106rpx;
		.medicalRecord-tab-view{
			flex:1;
			text-align:center;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(17,17,17, 0.5);
		}
		.active{
			font-size: 32rpx;
			font-weight:bold;
			color: #111111;
		}
		.medicalTabBorderOuter{
			display:flex;
			justify-content: center;
			margin-top:-4rpx;
			.medicalRecordTab{
				width: 48rpx;
				height: 6rpx;
				background: #111111;
				border-radius: 6rpx;
			}
		}
	}
	.medical-tab0-content,.medical-tab1-content{
		background: #F6F6F7;
		min-height: 100vh;
		padding-bottom: 40rpx;
		.medical-tab0-tips, .medical-tab1-tips{
			display: flex;
			background: #FFFBE7;
			height: 128rpx;
			align-items: center;
			padding: 0rpx 32rpx 0rpx 32rpx;
			.medical-tab0-tips-left{
				font-size: 22rpx;
				font-weight: 400;
				color: #FF6022;
				flex: 1;
			}
			.medical-tab0-tips-right{
				width: 160rpx;
				height: 64rpx;
				background: #FFD300;
				border-radius: 32rpx;
				font-weight: 600;
				color: #111111;
				font-size: 24rpx;
				text-align:center;
				line-height: 64rpx;
				margin-left: 48rpx;

			}
		}
	}
	.medical-tab0-list:first-of-type{
		margin-top: 0rpx;
	}
	.medical-tab0-list{
		background-color:#fff;
		padding: 32rpx 28rpx 0rpx 28rpx;
		margin-top: 24rpx;
		border-radius: 16rpx;

		.medical-tab0-title{
			font-size: 36rpx;
			// font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			text-align:center;
			padding-bottom: 32rpx;
		}
		
		.medical-tab0-list-content{
			display: flex;
			padding-bottom: 32rpx;
			.medical-tab0-list-key{
				font-size: 28rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				// line-height: 40rpx;
			}
			.medical-tab0-list-name{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				// font-weight: 400;
				color: #999999;
				padding-left: 12rpx;
				.red{
					color: #FF413C;

				}
			}
		}
		.medical-tab0-list-detail{
			font-size: 28rpx;
			// font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			text-align:center;
			line-height: 104rpx;
		}
		
	}
	.medical-tab0-list-detail{
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		margin: 0rpx -28rpx;
	}
	.medical-tab0-list-Outer{
		padding : 0rpx 32rpx;
		// padding-top: 32rpx;
	}
	.medical-tab0-animal{
		display: flex;
		padding: 32rpx 0rpx 42rpx 0rpx;
		.medical-tab0-animal-title{
			font-size: 44rpx;
			font-weight: 600;
			color: #333333;
			flex:1;
			
		}
		.medical-tab0-animal-check{
			width: 136rpx;
			height: 48rpx;
			border-radius: 32rpx;
			// opacity: 0.2;
			border: 1rpx solid rgba(17,17,17,0.2);
			text-align:center;
			line-height: 48rpx;
			font-size: 24rpx;
			// font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
		}
	}
	.medical-tab1-content{
		.medical-tab1-list{
			display:flex;
			margin-bottom 36rpx;
			.medical-tab1-list-left{
				margin-right: 37rpx;
				.medical-tab1-list-left-title{
					height: 32rpx;
					background: rgba(51,51,51,0.05);
					border-radius: 4rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #666;
					width: 76rpx;
					text-align: center;
					box-sizing: content-box;
				}
				.medical-tab1-list-left-time{
					display:flex;
					padding-bottom: 6rpx;
					.medical-tab1-list-left-time-first {
						font-size: 48rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #333333;
					}
					.medical-tab1-list-left-time-second{
						font-size: 26rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #333333;
						line-height: 76rpx;
						padding-left: 6rpx;
					}
				}
			}
			.medical-tab1-list-right{
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 28rpx 24rpx;
				
				.medical-tab1-list-right-list{
					margin-bottom: 32rpx;
				}
				.medical-tab1-list-right-tips{
					font-size: 28rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #999999;
				}
				.medical-tab1-list-right-iconTip{
					padding: 5rpx 16rpx 5rpx 12rpx;
					height: 44rpx;
					background: #F5F5F5;
					border-radius: 32rpx;
					align-items: center;
					display: flex;
					width: fit-content;
					margin-bottom: 16rpx;
					box-sizing: border-box;
					image{
						width: 24rpx;
						height: 24rpx;
					}
					.medical-tab1-list-right-iconTip-text{
						font-size: 24rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding-left: 5rpx;
					}
				}
			}
		}
	}
</style>
